/* eslint-disable react/no-this-in-sfc */
import { useEffect } from 'react';
import Highcharts from 'highcharts/highstock';
import Highcharts3D from 'highcharts/highcharts-3d';
import styles from './index.scss';

Highcharts3D(Highcharts);
const colors = ['#008CFF', '#00C094', '#FF9A3D', '#8D59FD'];

export default function RingPie3D({ id = 'RingPie3D', showData = [] }) {
  const drawChart = () => {
    Highcharts.chart(
      id,
      {
        chart: {
          type: 'pie',
          height: 130,
          options3d: {
            enabled: true,
            alpha: 55,
          },
          backgroundColor: 'transparent',
          spacingTop: 0,
          spacingLeft: 0,
          spacingRight: 0,
          spacingBottom: 0,
        },
        colors,
        credits: {
          enabled: false,
        },
        legend: {
          enabled: true, // 图例开关
          symbolPadding: 16, // 图标跟文字的间距
          symbolRadius: '50%', // 图标圆角
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'middle',
          itemMarginBottom: 10,
          floating: true,
          symbolHeight: 10,
          symbolWidth: 10, // 图标宽度
          itemStyle: {
            color: '#999',
            fontSize: 14,
            fontWeight: 400,
          },
          itemHoverStyle: {
            color: '#eee',
          },
          navigation: {
            arrowSize: 10,
            activeColor: '#fff',
            inactiveColor: '#999',
            style: {
              color: '#fff',
            },
          },
          labelFormatter() {
            const { length } = this.name;
            let label = this.name;
            for (let i = length; i < 8; i++) {
              label += '&emsp;';
            }
            return `${label}<span style="color:#fff">${this.y}</span>`;
          },
        },
        tooltip: {
          borderColor: '#1890FF',
          backgroundColor: '#004CBD',
          style: {
            color: '#fff',
            fontSize: 13,
          },
          formatter() {
            return `${this.key}\n${this.y}个`;
          },
        },
        title: {
          text: '',
        },
        subtitle: false,
        plotOptions: {
          pie: {
            center: ['19%', '50%'],
            size: '110%',
            innerSize: '78%',
            depth: 12,
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: false,
            },
            showInLegend: true,
          },
          series: {
            animation: false,
          },
        },
        series: [
          {
            name: '',
            data: showData,
            // enableMouseTracking: false,
          },
        ],
      },
      c => {
        // 图表初始化完毕后的会掉函数
        // 环形图圆心
        const centerY = c.series[0].center[1];
        const titleHeight = parseInt(c.title.styles.fontSize, 10);
        // 动态设置标题位置
        c.setTitle({
          y: centerY + titleHeight / 2,
        });
      },
    );
  };

  useEffect(() => {
    showData.length > 0 && drawChart();
  }, [showData]);

  return (
    <div className={styles.ringBox}>
      <div id={id}></div>
    </div>
  );
}
